<template>
  <el-dialog
    v-model="visible"
    :title="dialogTitle"
    width="500px"
    :close-on-click-modal="false"
    :close-on-press-escape="true"
    @close="handleClose"
    class="error-dialog"
  >
    <div class="error-content">
      <!-- 错误信息 -->
      <div class="error-message">
        <div class="message-label">错误描述：</div>
        <div class="message-text">{{ errorMessage }}</div>
      </div>
      
      <!-- 错误数据 -->
      <div v-if="hasErrorData" class="error-data">
        <div class="data-label">错误详情：</div>
        <div class="data-content">
          <div 
            v-if="Array.isArray(errorData)" 
            class="data-list"
          >
            <div 
              v-for="(item, index) in errorData" 
              :key="index" 
              class="data-item"
            >
              {{ item }}
            </div>
          </div>
          <div v-else class="data-text">
            {{ errorData }}
          </div>
        </div>
      </div>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleConfirm">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { ref, computed, watch } from 'vue'
import { WarningFilled } from '@element-plus/icons-vue'

export default {
  name: 'ErrorDialog',
  components: {
    WarningFilled
  },
  props: {
    // 控制弹窗显示
    modelValue: {
      type: Boolean,
      default: false
    },
    // 错误标题
    topic: {
      type: String,
      default: '错误详情'
    },
    // 错误描述
    message: {
      type: String,
      default: '错误描述：'
    },
    // 错误数据
    data: {
      type: [Array, String, Object],
      default: null
    }
  },
  emits: ['update:modelValue', 'confirm'],
  setup(props, { emit }) {
    const visible = ref(false)
    
    // 监听 modelValue 变化
    watch(() => props.modelValue, (newVal) => {
      visible.value = newVal
    })
    
    // 监听 visible 变化，同步到父组件
    watch(visible, (newVal) => {
      emit('update:modelValue', newVal)
    })
    
    // 计算属性
    const dialogTitle = computed(() => props.topic)
    const errorMessage = computed(() => props.message)
    const errorData = computed(() => props.data)
    
    // 是否有错误数据
    const hasErrorData = computed(() => {
      return props.data !== null && props.data !== undefined && props.data !== ''
    })
    
    // 处理确认按钮点击
    const handleConfirm = () => {
      visible.value = false
      emit('confirm')
    }
    
    // 处理弹窗关闭
    const handleClose = () => {
      visible.value = false
    }
    
    return {
      visible,
      dialogTitle,
      errorMessage,
      errorData,
      hasErrorData,
      handleConfirm,
      handleClose
    }
  }
}
</script>

<style scoped>
.error-dialog {
  .el-dialog__header {
    background-color: #fef0f0;
    border-bottom: 1px solid #fde2e2;
    padding: 20px 20px 15px;
  }
  
  .el-dialog__title {
    color: #f56c6c;
    font-weight: 600;
    font-size: 18px;
  }
}

.error-content {
  padding: 20px 0;
  text-align: center;
}

.error-icon {
  margin-bottom: 20px;
}

.error-message {
  margin-bottom: 20px;
  text-align: left;
}

.message-label {
  font-weight: 600;
  color: #606266;
  margin-bottom: 8px;
  font-size: 14px;
}

.message-text {
  color: #f56c6c;
  font-size: 16px;
  line-height: 1.5;
  padding: 12px;
  background-color: #fef0f0;
  border: 1px solid #fde2e2;
  border-radius: 6px;
}

.error-data {
  text-align: left;
  margin-top: 20px;
}

.data-label {
  font-weight: 600;
  color: #606266;
  margin-bottom: 8px;
  font-size: 14px;
}

.data-content {
  color: #909399;
  font-size: 14px;
}

.data-list {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 12px;
}

.data-item {
  padding: 6px 0;
  border-bottom: 1px solid #e9ecef;
  color: #495057;
}

.data-item:last-child {
  border-bottom: none;
}

.data-text {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 12px;
  color: #495057;
}

.dialog-footer {
  text-align: center;
  padding: 15px 0 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .error-dialog {
    width: 90% !important;
    margin: 0 auto;
  }
  
  .error-content {
    padding: 15px 0;
  }
  
  .message-text,
  .data-list,
  .data-text {
    font-size: 14px;
  }
}
</style>
